import React, { Component } from 'react'
import {
  HashRouter as Router,
  Link,
  Switch,
  Route,
  Redirect
} from 'react-router-dom'

import NewList from './NewList'
import FoodList from './FoodList'
import NotFound from './NotFound'
import NewDetail from './NewDetail'
import Fooddetail from './Fooddetail'

export default class Index extends Component {
  render () {
    return (
      // 路由容器：包裹在最外层，一般实际开发中，放在根组件最外层
      <Router>
        <div>
          <p>
            {/* 声明式导航跳转 */}
            <Link to='/newlist'>新闻列表</Link>&nbsp;&nbsp;&nbsp;
            <Link to='/foodlist'>食品列表🐥</Link>
          </p>
          <hr />
          <Switch>
            {/* 严格匹配(精准匹配)  exact,路径一定要等于path, 而不是包含关系*/}
            {/* <Route exact path='/' component={NewList} /> */}

            <Route path='/newlist' component={NewList} />
            <Route path='/foodlist'>
              <FoodList />
            </Route>
            <Route path='/newdetail' component={NewDetail} />

            {/* 默认情况下，组件写法，props拿不到对应的内容 */}
            <Route path='/fooddetail/:id/:name'>
              <Fooddetail />
            </Route>
            {/* 重定向一般放在已有规则的后面 */}
            <Redirect exact from='/' to='/foodlist' />

            {/* 404放在最后 */}
            {/* 写法一 */}
            {/* <Route component={NotFound} /> */}
            {/* 写法二 */}
            <Route path='*' component={NotFound} />
          </Switch>
        </div>
      </Router>
    )
  }
}
